<template>
    <div class="table-rows">
        <div v-if="src" class="table-rows-image">
            <img :src="src" />
        </div>
        <div class="table-rows-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TableRows',
    props: {
        src: {
            type: String,
            default: ''
        }
    },
    mounted() {
        if(this.$slots.default) {
            this.$slots.default = this.$slots.default.map(item => {
                if(item.tag && item.elm) item.elm.classList.add('table-rows-text');
                return item;
            })
        }
    }
}
</script>

<style lang="less" scoped>
.table-rows {
    display: flex;
    align-items: center;
    padding: 10px 0;
    &-image {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        width: 60px;
        height: 60px;
        border-radius: 4px;
        border: 1px solid #bdc6d5;
        overflow: hidden;
        img {
            display: block;
            max-width: 100%;
            max-height: 100%;
        }
    }
    &-content {
        min-width: 1px;
    }
    &-text {
        display: block;
        line-height: 18px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    &-text + &-text {
        margin-top: 15px;
    }
}
</style>